<template>
    <div class="city-word">
        <ul>
            <li @click="handleClick" v-for="(item,index) of cities" :key="index" >{{index}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"CityWord",
    props:['cities'],
    methods: {
        handleClick(event){
            this.$emit("changeWord",event.target.innerText)
        }
    }

}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/global.scss';
.city-word{
    position: fixed;
    width:50px;
    right:0;
    top:200px;
    color:color(bg);
    z-index: 999;
    li{
        text-align: center;
        line-height: 50px;
    }
}
</style>
